<script setup lang="ts">
import MoneyBox from '~/assets/imgs/invitation-spin/moneyBox.png';
import { explain } from '../hooks/index';

const copywriter = explain();
</script>

<template>
  <TCard class="text-sys-text-body" :title="$t('5N2ijMgfaRh5UeeZlmll')">
    <div class="grid grid-cols-[1fr_auto] items-center gap-15 text-base font-400 leading-28px">
      <div class="grid grid-flow-col grid-cols-2 grid-rows-3 h-100%">
        <p v-for="(item, key) in copywriter" :key="key">
          {{ key + 1 }}. {{ item.txt }}
        </p>
      </div>
      <div>
        <img :src="MoneyBox" class="h-140px object-cover">
      </div>
    </div>
  </TCard>
</template>

<style scoped lang="scss">
.box {
  --uno: 'h-100% flex flex-col whitespace-wrap';
}
</style>
